<template>
    <div>
        <Content></Content>
        <button @click="message='你好'">改变message的值</button>
        <p>HomeView--{{obj.message}}</p>
        <p></p>
    </div>
</template>

<!-- HomeView祖先组件 -->
<!-- Content父组件 -->
<!-- Hello孙子组件 -->
<!-- 现在希望Hello孙子组件,获取HomeView祖先组件的数据-->

<script>
import Content from './Content.vue'

export default {
    data(){
        return{
            message: 'HelloWorld',
            obj:{
                message:"HelloWorld"
            }

        }
    },
    // provide inject不是响应式,是一个单向数据流
    // provide:{message:"HelloWorld"} //如果是传递固定的值
    // 如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性)，那么可以以函数形式使用 provide：
    provide(){
        return{
            // message: this.message,
            // 响应式对象方式
            // obj:this.obj,
            // 函数返回响应式,通过这个函数也能响应式,箭头函数/普通函数都可以
            message:()=>this.message,
            // message:function(){
            //     return this.message
            // }

        }
    },
    components:{
        Content
    },
    
}
</script>


